<template>
	<view class="wrap" style="padding-top: 100rpx;">
		<view class="logo">
			<!-- <image :src="aboutInfo.icon || '../../static/images/icon-logo.png'" mode=""></image> -->
			<u-image :src="aboutInfo.icon || '/static/images/icon-logo.png'" width="180rpx" height="180rpx" border-radius="20rpx"></u-image>
		</view>
		<view class="title">
			<text class="name">{{aboutInfo.name}}</text>
			<text class="version">V{{aboutInfo.version}}</text>
		</view>
		<view class="content" style="padding: 30rpx;">
			<u-parse :html="aboutInfo.description"></u-parse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aboutInfo: null
			}
		},
		onLoad(options) {
			this.getPageInfo()
		},
		methods: {
			getPageInfo() {
				this.$g_api.independentAbout().then(({
					data
				}) => {
					this.aboutInfo = data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		// padding: 100rpx 60rpx 150rpx;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #fff;
	}

	.logo {
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		// image {
		// 	width: 180rpx;
		// 	height: 180rpx;
		// 	margin-bottom: 30rpx;
		// 	border-radius: 20rpx;
		// 	overflow: hidden;
		// }
	}

	.title {
		// display: flex;
		margin-bottom: 42rpx;
		// line-height: 42rpx;
	}

	.name {
		font-size: 36rpx;
		color: #333333;
	}

	.version {
		margin-left: 20rpx;
		font-size: 26rpx;
		color: #999;
	}

	.content {
		font-size: 28rpx;
		color: #999999;
		line-height: 48rpx;
	}
</style>
